<!-- <div class="card-container"> -->

<div class="class grid grid-rows-[3rem_100px] bg-white shadow-md rounded-lg
    transition-shadow hover:shadow-xl hover:outline hover:outline-2 outline-green-600"
    data-cy="{{ class.id }}"
    data-lang="{{class.language or current_language().lang}}"
    _="on removeMe remove me">

    <h2 class="name text-white rounded-t-lg px-6 flex items-center m-0 bg-green-600">
        {{ class.name|e }} - {{class.teacher}}
    </h2>

    <!-- <div class="py-2 px-6">
        <p class="text-gray-600 mt-1"><strong>{{_('teacher')}}:</strong> {{ class.teacher }}</p>
        <p class="text-gray-600 mt-1"><strong>{{_('students')[0]|upper}}{{_('students')[1:]}}:</strong> {{ class.students|length }}</p>
        <p class="text-gray-600 mt-1"><strong>{{_('last_update')}}:</strong> {{ class.date|format_date }}</p>
    </div> -->

    <div id="actions"
        class="flex items-center gap-2 px-6 py-4 bg-gray-200 shadow-lg">
        {% if class.teacher == username %}
            <a href="/for-teachers/customize-class/{{class.id}}"
                class="blue-btn" id="edit_class_button">
                {{_('customize_class')}}</a>
        {% endif %}
        <a href="/for-teachers/class/{{class.id}}/preview"
            class="green-btn no-underline cursor-pointer preview_class"
            data-cy="preview_class_link">{{_('preview')}}</a>
    </div>
</div>
<!-- </div> -->